<template>
  <el-row :gutter="20" :data="data">
    <el-row class="cus-info-title">{{ option.title }}</el-row>
    <el-row class="cus-info-row">
      <div v-for="(item, index) in option.column" :key="index">
        <el-col v-if="!isShowFlag" :span="24" class="line-distance mt6">
          <el-col :span="12">{{ item.label }}：</el-col>
          <el-col :span="12">{{ data[item.prop] }}</el-col>
        </el-col>
        <el-col v-if="isShowFlag" :span="item.span" class="line-distance mt6">
          <el-col :span="12">{{ item.label }}：</el-col>
          <el-col v-if="!item.cusInput" :span="12">{{ data[item.prop] }}</el-col>
          <el-col v-else="item.cusInput" :span="12" class="item-rightSet">
            <el-input v-model="data[item.prop]" placeholder="请输入内容" />
          </el-col>
        </el-col>
      </div>
    </el-row>
  </el-row>
</template>

<script>
export default {
  name: 'BizCustInfo',
  props: ['data', 'option', 'showDetail', 'isShowFlag']
}
</script>

<style scoped>
.cus-info-title {
  font-weight: bold;
}
  .line-distance{
    height: 40px;
    line-height: 40px;
  }
  .item-rightSet{
    padding-right: 5px;
  }
  .mt6{
    margin-top: 6px;
  }
</style>
